class CustomShadow extends HTMLElement{
    // custom element 第一次挂载时执行
    connectedCallback(){
        // 创建shadow Root
        var shadow=this.attachShadow({mode:'open'})
        // 或者使用属性this.shadowRoot 来访问shadowRoot
        console.log(this.shadowRoot==shadow)
        shadow.innerHTML=`
           <style>
                .test{
                    background-color: red;
                    height: 100px;
                }
           </style>
           <div class="test">shadow root</div>
        `
    }
}

// customElements定义组件

customElements.define("custom-shadow",CustomShadow)